<template>
  <div
    class="yanyan_video_wraper"
    ref="yanyan_video_wraper"
    @touchmove.prevent
    @click="onClick"
  >
    <div class="videoPlayer_outer" ref="videoPlayer_outer">
      <!-- 弹幕显示界面 -->
      <div class="barrageListShow_wrapper">
        <!-- 每一个弹幕 -->
        <div
          v-for="(item, index) in willToRenderList"
          :ref="`barrageItem${item.id}`"
          :key="item.id"
          :style="{
            ...item.style,
            color: item.color,
            'font-size': item['font-size'],
            transform:
              item.sendTime <= currentTime
                ? !item.falldown
                  ? `translateX(${-item.translateX}px)`
                  : `translateX(0)`
                : `translateX(0)`,
          }"
          class="barrage"
          :class="[
            item.sendTime <= currentTime ? 'barrage_init' : 'barrage_normal',
            isPlaying ? '' : 'barrage_stop',
            item.falldown ? 'barrage_falldown' : '',
          ]"
          v-if="willToRenderList.length"
        >
          {{ item.content }}
        </div>
      </div>
      <div class="videoPlayer_inner" ref="videoPlayer_inner">
        <canvas
          class="renderbox"
          canvas-id="renderbox"
          ref="canvas"
          :style="{
            width: `${canvasRenderWidth}px`,
            height: `${canvasRenderHeight}px`,
          }"
        ></canvas>
        <video
          :src="src"
          id="yanyan_video"
          ref="yanyan_video"
          :initial-time="initialtime"
          :show-fullscreen-btn="showfullscreenbtn"
          :muted="muted"
          :loop="loop"
          :controls="controls"
          :page-gesture="pagegesture"
          :enable-progress-gesture="enableprogressgesture"
          :object-fit="objectfit"
          :title="'yanyan播放器'"
          :show-center-play-btn="showcenterplaybtn"
          @timeupdate="timeupdate"
          @ended="onEnded"
          @fullscreenchange="fullscreenchange"
          @play="onPlay"
          @pause="onPause"
          @waiting="onWaiting"
        ></video>
      </div>
    </div>

    <!-- 组件控制面板 -->
    <div
      class="video_top"
      :style="{ visibility: this.isShowControl ? 'visible' : 'hidden' }"
    >
      <div class="video_top_title">
        <div class="back" @click="exitFullScreen">
          <!-- 返回 -->
        </div>
        <div class="videoTitle">{{ videoTitle }}</div>
      </div>
      <div class="video_top_function">
        <div class="fullScreen_function">
          <div class="like off">
            <!-- 点赞 -->
          </div>
          <div class="report off">
            <!-- 举报 -->
          </div>
          <div class="coin off">
            <!-- 投币 -->
          </div>
          <div class="share">
            <!-- 转发分享 -->
          </div>
        </div>
        <div class="outfullScreen_function">
          <div class="floating">
            <!-- 浮窗播放 -->
          </div>
          <div class="projector">
            <!-- 投屏播放 -->
          </div>
        </div>
        <div class="more">
          <!-- 更多 -->
        </div>
      </div>
    </div>
    <!-- 顶部倍速播放 -->
    <div class="speedPlay" v-if="isLongPress">
      <div class="speedPlay_icon">>>></div>
      <div class="speedPlay_tip">倍速播放中</div>
    </div>
    <!-- 中间时间进度 -->
    <div class="video_duration" v-if="isvideo_durationShow">
      <span
        >{{ precurrentTime | timeFilter }}/{{ durationTime | timeFilter }}</span
      >
    </div>
    <!-- 中间音量 -->
    <div
      class="video_volume"
      :style="{ visibility: this.isvideo_volumeShow ? 'visible' : 'hidden' }"
    >
      <div class="volume_icon">
        <div :class="volume > 0 ? 'on' : 'off'"></div>
        <!-- 音 -->
      </div>
      <div class="volumebar" ref="volumebar">
        <div
          class="volumebarLeft"
          ref="volumebarLeft"
          :style="{ width: `${volumebarLeftWidth}px` }"
        ></div>
        <div
          class="volumebarRight"
          ref="volumebarRight"
          :style="{ width: `${volumebarRightWidth}px` }"
        ></div>
      </div>
    </div>
    <!-- 底部播放器控制组件 -->
    <div
      class="video_control"
      ref="video_control"
      :style="{ visibility: this.isShowControl ? 'visible' : 'hidden' }"
    >
      <!-- 自定义播放控件control -->
      <div class="play">
        <div @tap="play" v-if="!isPlaying" class="playicon">
          <!-- 播放 -->
        </div>
        <div @tap="pause" v-else class="pauseicon">
          <!-- 暂停 -->
        </div>
      </div>
      <div class="progressbox">
        <div class="time left">{{ currentTime | timeFilter }}</div>
        <div class="progress_wrapper" ref="progress" @click="falldown">
          <div class="progress_outer">
            <div
              class="progress_buffer"
              ref="progress_buffer"
              :style="{
                width: `${runbarBufferWidth}px`,
              }"
            ></div>
            <div
              class="progress_left"
              ref="progress_left"
              :style="{ width: `${runbarLeftWidth}px` }"
            ></div>
            <div
              class="circle"
              ref="circle"
              :style="{ transform: `translateX(${circleOffsetLeft - 5}px)` }"
            ></div>
          </div>
        </div>
        <div class="time">
          <span class="right">{{ currentTime | timeFilter }}/</span>
          <span>{{ durationTime | timeFilter }}</span>
        </div>
      </div>
      <div class="barrage_wrapper">
        <div class="barrage_ off">
          <!-- 弹幕打开 -->
        </div>
        <div class="barrage_set">
          <!-- 弹幕设置 -->
        </div>
        <div class="barrage_input">发个弹幕分享你的看法吧~</div>
      </div>
      <div class="speed" @click.stop="speedShow">倍速</div>
      <div class="full_screen" @click="requestFullScreen" v-if="!isFullScreen">
        <!-- 全屏 -->
      </div>
      <div class="endfull_screen" @click="exitFullScreen" v-else>
        <!-- 恢复 -->
      </div>
      <div class="resolutionRatio">720p</div>
    </div>
    <!-- 右边倍速 -->
    <ul
      class="speedList"
      :class="isSpeedShow ? 'show' : 'hidden'"
      v-if="isSpeedShowOn"
    >
      <li
        v-for="item in speedArrays"
        @click.stop="changeSpeed(item.speed)"
        :class="currentSpeed == item.speed ? 'on' : ''"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // src: "",//视频路径
      // poster: "", //视频封面
      initialtime: 0, //开始播放位置
      showfullscreenbtn: false, //显示全屏按钮
      // muted: false, //静音播放
      // loop: false, //循环播放
      controls: false, //显示控件
      pagegesture: false, //亮度和音量手势
      enableprogressgesture: false, //控制进度手势
      objectfit: "contain", //视频填充模式
      showcenterplaybtn: false, //显示中间播放按钮
      speedArrays: [
        { title: "x0.5", speed: 0.5 },
        { title: "正常", speed: 1 },
        { title: "x1.25", speed: 1.25 },
        { title: "x1.5", speed: 1.5 },
        { title: "x2.0", speed: 2 },
      ],
      currentSpeed: 1, //当前倍速

      // 页面组件相关
      $yanyan_video_wraper: null, //播放器容器节点对象
      $videoPlayer_outer: null, //(包含弹幕+渲染节点)
      // $videoPlayer_inner: null, //包含canvas和video渲染节点
      $video: null, //播放器控制对象
      $yanyan_videoFullscreen: null, //真实的原生video节点
      $runbar: null, //进度条对象
      $canvas: null, //画布节点
      ctx: null, //画布操作文本对象

      // 页面布局相关(根据浏览器全屏而改变)
      videoWidth: 0, //video组件宽度
      videoHeight: 0, //video组件高度
      // videoTopbarHeight: 0, //头部导航栏高度
      // videoTopbarWidth: 0, //头部导航栏宽度
      // videoControlHeight: 0, //控制栏高度
      // videoControlWidth: 0, //控制栏宽度
      // runbarLeftWidth: 0, //进度条左边长度(计算属性)
      // runbarRightWidth: 0, //进度条右边长度(计算属性)
      // runbarBufferWidth: 0, //进度条缓存长度(计算属性)
      runbarOffsetLeft: 0, //左偏移量
      runbarWidth: 0, //进度条总长度
      circleOffsetLeft: 0, //圆形左偏移
      volumebarWidth: 0, //音量条宽度
      // volumebarLeftWidth:0,//音量左侧宽度(计算属性)
      // volumebarRightWidth:0,//音量右侧宽度(计算属性)
      // canvasRenderWidth: 0, //视频渲染到画布的宽度(计算属性)
      // canvasRenderHeight: 0, //视频渲染到画布的高度(计算属性)

      // 视频播放状态
      currentTime: 0, //当前时间(s)
      durationTime: 0, //总时长(s)
      // currentBufferTime: 0, //缓存时间(s)(计算属性)
      size: 0, //视频大小(M)
      videoInfoWidth: 0, //视频真实宽度
      videoInfoHeight: 0, //视频真实高度
      volume: 0, //视频当前音量(0~1)
      timerange: null, //视频缓存对象(计算属性)
      timerangeMaxIndex: 0, //缓存列表最大长度(length)
      isEnd: false, //视频播放结束
      // zoomFactor:1,//视频根据窗口计算的缩放系数(计算属性)
      clickTimeoutTimer: null, //单击/双击判断计时器
      clickTimeoutsec: 300, //单击/双击延时判断时长(ms)
      videoTouchX: 0, //video组件滑动初始X位置
      videoTouchY: 0, //video组件滑动初始Y位置
      videoLeftToucharea: 0, //video组件上下滑动左区域范围(0-?)
      videoRightToucharea: 0, //video组件上下滑动右区域范围(?-videoWidth)
      videoTouchRate: 0.25, //左右区域比例
      precurrentTime: 0, //水平滑动时预显示目标时间
      lastcurrentTime: 0, //开始水平滑动时记录当前时间
      maxSecond: 90, //水平滑动一个屏幕增减90(s)
      prevolume: 0, //竖直滑动时预显示目标音量
      lastvolume: 0, //开始竖直滑动时记录当前音量
      maxVolume: 0, //竖直滑动n个屏幕高度增减音量1
      volumeHeithgtimes: 4, //n个屏幕
      // 底部控制状态
      controlTimeoutTimer: null, //控件显示/隐藏等待计时器
      CONTROLTIMEOUTSEC: 4000, //控件显示隐藏判断时长(ms)
      // 控制栏组件对象
      isPlaying: false, //是否正在播放
      clicked: false, //是否已经单击过一次
      isShowControl: false, //是否显示控件control
      horizontalTouch: false, //判断为水平滑动
      perpendicularTouch: false, //判断为垂直滑动
      isFullScreen: false, //是否全屏
      isvideo_durationShow: false, //显示预时间
      isvideo_volumeShow: false, //显示音量
      isSpeedShow: false, //显示倍速设置
      isSpeedShowOn: false, //初始化不显示

      longpressTimer: null, //长按计时器
      isLongPress: false, //长按状态
      LONGPRESSMINTIME: 500, //长按最短判断时间
      LONGPRESSSPEED: 2, //长按状态视频加速倍数
      isLongPressSpeedShow: false, //显示加速播放状态

      isVideoIMAGE: false, //视频镜像

      // 窗口初始状态(保存初始的样式)
      initVideoWidth: 0, //全屏状态的播放器宽度
      initVideoHeight: 0, //全屏状态的播放器高度

      // 弹幕相关属性
      willToRenderList: [], //等待渲染弹幕列表栈
      willToRenderListMaxLength: 3, //等待渲染弹幕列表栈最大长度
      currentRenderIndex: 0, //当前渲染位置下标
      getBarrageList: [
        {
          id: 1,
          sendTime: 1,
          content: "测试弹幕1s",
          position: "normal",
          "font-size": "28rpx", //文本大小
          color: "rgb(255,255,255)",
        },
        {
          id: 2,
          sendTime: 1.5,
          content: "测试弹幕1.5s",
          position: "normal",
          "font-size": "32rpx", //文本大小
          color: "rgb(0,122,204)",
        },
        {
          id: 3,
          sendTime: 2,
          content: "测试弹幕2s",
          position: "normal",
          "font-size": "32rpx", //文本大小
          color: "rgb(255,255,255)",
        },
        {
          id: 4,
          sendTime: 10,
          content: "测试弹幕10s",
          position: "normal",
          "font-size": "32rpx", //文本大小
          color: "rgb(255,255,255)",
        },
        {
          id: 5,
          sendTime: 12,
          content: "测试弹幕12s",
          position: "normal",
          "font-size": "32rpx", //文本大小
          color: "rgb(255,255,255)",
        },
        {
          id: 6,
          sendTime: 29,
          content: "测试弹幕29s",
          position: "normal",
          "font-size": "32rpx", //文本大小
          color: "rgb(255,255,255)",
        },
      ], //本视频的所有弹幕列表(按时间排序)
      barrageDuration: 5, //弹幕持续时间(s)
      istouch: false, //是否正在滑动进度条或者屏幕
    };
  },
  props: {
    src: {
      typeof: String,
      required: true,
    },
    poster: {
      typeof: String,
      required: false,
    },
    videoTitle: {
      typeof: String,
      required: false,
      default: "",
    },
    loop: {
      typeof: Boolean,
      required: false,
      default: false,
    },
    muted: {
      typeof: Boolean,
      required: false,
      default: true,
    },
  },
  mounted() {
    // 初始化获取控制对象
    this.$video = uni.createVideoContext("yanyan_video", this);
    this.$yanyan_video_wraper = this.$refs.yanyan_video_wraper;
    this.$videoPlayer_outer = this.$refs.videoPlayer_outer;
    // this.$videoPlayer_inner = this.$refs.videoPlayer_inner;
    this.$canvas = this.$refs.canvas.$el.children[0];
    this.ctx = this.$canvas.getContext("2d");
    this.$yanyan_videoFullscreen = this.getVideoEle("uni-video-video");
    this.$yanyan_videoFullscreen.style.display = "none";
    this.$runbar = this.$refs.progress;
    this.$volumebar = this.$refs.volumebar;
    // 初始化获取控制对象的布局
    this.verticalScreenInit();
    // 保存初始化控制对象的布局
    this.saveInitStyle();
    // 获取视频信息
    this.$nextTick(() => {
      this.getVideoInfo(this.src);
    });
    // 获取播放器音量设置
    this.volume = this.$yanyan_videoFullscreen?.volume;

    // 初始化事件监听
    this.$videoPlayer_outer.addEventListener(
      "touchstart",
      this.videoTouchStartCb
    );
    this.$videoPlayer_outer.addEventListener(
      "touchmove",
      this.videoTouchMoveCb
    );
    this.$videoPlayer_outer.addEventListener("touchend", this.videoTouchEndCb);
    this.$runbar.addEventListener("touchmove", this.runbarTouchMoveCb);
    this.$runbar.addEventListener("touchend", this.runbarTouchEndCb);

    // 监听全屏导致屏幕旋转重新获取样式
    window.addEventListener("resize", this.verticalScreenInit, false);
  },
  methods: {
    // 加工渲染弹幕
    renderBarrage() {
      if (!this.isPlaying) return;
      if (this.istouch) return;
      // 监视长度自动获取弹幕准备渲染
      let newVal = this.willToRenderList.length;
      // console.log("当前栈长度", newVal);
      let len = this.willToRenderListMaxLength - newVal;
      // console.log("当前栈剩余长度", len);
      let currentBarrage = {}; //新建一个弹幕对象，防止原弹幕数组被污染，解决了暂停重播弹幕残留问题
      // 检查当前渲染中的弹幕列表
      this.willToRenderList.forEach((item, index) => {
        // 栈满了
        if (len == 0) {
          // 如果已经完成一次弹幕动作，则删除
          if (item.sendTime + this.barrageDuration <= this.currentTime) {
            this.willToRenderList.splice(index, 1);
            len--;
          }
        }
        // 判断是否为暂停过()
        if (item.reRender) {
          let initStyle = {
            "font-family": "'Microsoft JhengHei', Georgia, Serif", //字体
            "font-weight": "bold", //加粗
            opacity: 1, //透明度
            left: `${item.remainLeft}px`, //左偏移(播放器宽度)
            transition: `transform ${item.remainTime}s linear 0s`, //过渡属性[transform ??s linear 0s]
          };
          this.$set(item, "style", initStyle);
          this.$set(item, "translateX", item.remainTranslateX);
          this.$set(item, "reRender", false);
        }
        // 判断是否存在跳转弹幕
        if (item.falldown) {
          let initStyle = {
            "font-family": "'Microsoft JhengHei', Georgia, Serif", //字体
            "font-weight": "bold", //加粗
            opacity: 1, //透明度
            left: `${this.videoWidth}px`, //左偏移(播放器宽度)
            transition: `transform ${this.barrageDuration}s linear ${item.delayTime}s`, //过渡属性[transform ??s linear 0s]
          };
          this.$set(item, "style", initStyle);
          this.$set(item, "falldown", false);
        }
      });
      // 检查完
      // 当栈中未满，并且加载位置未到末尾
      if (len > 0 && this.getBarrageList.length > this.currentRenderIndex) {
        // 从数组中获取下一个弹幕
        currentBarrage = { ...this.getBarrageList[this.currentRenderIndex] };
        if (currentBarrage.sendTime < this.currentTime) {
          // 如果当前播放时间超过弹幕应出现时间，则跳过该弹幕，避免弹幕中途消失
          this.currentRenderIndex++;
          return;
        } else {
          let initStyle = {
            "font-family": "'Microsoft JhengHei', Georgia, Serif", //字体
            "font-weight": "bold", //加粗
            opacity: 1, //透明度
            left: `${this.videoWidth}px`, //左偏移(播放器宽度)
            transform: `translateX(0)`,
            transition: `transform ${this.barrageDuration}s linear 0s`, //过渡属性[transform ??s linear 0s]
          };
          this.$nextTick(() => {
            let $barrageItem = this.$refs[`barrageItem${currentBarrage.id}`][0];
            let translateX = this.videoWidth + $barrageItem.offsetWidth;
            this.$set(currentBarrage, "translateX", translateX);
          });
          this.willToRenderList.push(currentBarrage);
          this.$set(currentBarrage, "style", initStyle);
          this.currentRenderIndex++;
        }
      }
    },
    // 跳转渲染
    falldownGetCurrentIndex() {
      // 清空弹幕渲染列表
      this.willToRenderList = [];
      // 获取应该显示弹幕的下标
      for (let [index, item] of this.getBarrageList.entries()) {
        if (this.currentTime < item.sendTime + this.barrageDuration) {
          this.currentRenderIndex = index;
          break;
        }
      }
      // 重新计算弹幕应该移动到的位置
      let end = this.currentRenderIndex + this.willToRenderListMaxLength;
      if (end > this.getBarrageList.length) {
        end = this.getBarrageList.length;
      }
      let arr = this.getBarrageList.slice(this.currentRenderIndex, end);
      arr.forEach((item) => {
        // 已经移动一段距离的弹幕
        if (this.currentTime > item.sendTime) {
          // console.log(item.sendTime, "已经渲染中");
          let currentBarrage = { ...item };
          // 计算已经移动的时间
          let delayTime = item.sendTime - this.currentTime;
          this.$nextTick(() => {
            let $barrageItem = this.$refs[`barrageItem${currentBarrage.id}`][0];
            let translateX = this.videoWidth + $barrageItem.offsetWidth;
            this.$set(currentBarrage, "translateX", translateX);
          });
          this.willToRenderList.push(currentBarrage);
          this.$set(currentBarrage, "falldown", true);
          this.$set(currentBarrage, "delayTime", delayTime);
          this.currentRenderIndex++;
        }
      });
      arr = null;
    },
    // 暂停播放时停止渲染
    pauseToRenderBarrage() {
      this.willToRenderList.forEach((item) => {
        if (item.sendTime < this.currentTime) {
          let $barrageItem = this.$refs[`barrageItem${item.id}`][0];
          let offsetWidth = $barrageItem.offsetWidth;
          let overTranslateX = Number(
            window
              .getComputedStyle($barrageItem)
              .getPropertyValue("transform")
              .split(",")[4]
          ); //获取transform的值
          // 已经出现的弹幕
          let translateX = item.translateX; //原过渡距离
          let remainTime =
            this.barrageDuration - this.currentTime + item.sendTime; //剩余时间+(偏差时间)
          let remainLeft = translateX + overTranslateX - offsetWidth; //计算剩余左偏移
          let remainTranslateX = translateX + overTranslateX; //计算剩余长度
          let initStyle = {
            "font-family": "'Microsoft JhengHei', Georgia, Serif", //字体
            "font-weight": "bold", //加粗
            opacity: 1, //透明度
            left: `${remainLeft}px`, //左偏移
            transition: `transform 0s linear 0s`, //过渡属性
          };
          this.$set(item, "style", initStyle);
          this.$set(item, "translateX", 0);
          this.$set(item, "remainLeft", remainLeft);
          this.$set(item, "remainTranslateX", remainTranslateX); //保存剩余长度
          this.$set(item, "remainTime", remainTime); //保存剩余时间
          this.$set(item, "reRender", true); //用来判断是否是继续播放
        }
      });
    },
    // 将video渲染到canvas上
    renderToCanvas() {
      // 未结束就渲染
      if (this.currentTime < this.durationTime && !this.isEnd) {
        // 在视频未结束前，递归渲染
        this.ctx.drawImage(
          this.$yanyan_videoFullscreen,
          0,
          0,
          this.canvasRenderWidth,
          this.canvasRenderHeight
        );
        window.requestAnimationFrame(this.renderToCanvas);
      }
    },
    // 动态获取播放器相关尺寸样式
    verticalScreenInit() {
      this.videoWidth = this.$yanyan_video_wraper.offsetWidth;
      this.videoHeight = this.$yanyan_video_wraper.offsetHeight;
      this.runbarWidth = this.$runbar.offsetWidth;
      this.runbarOffsetLeft = this.$runbar.offsetLeft;
      this.videoLeftToucharea = Math.floor(
        this.videoWidth * this.videoTouchRate
      );
      this.videoRightToucharea = Math.floor(
        this.videoWidth * (1 - this.videoTouchRate)
      );
      this.volumebarWidth = this.$volumebar.offsetWidth;
      this.maxVolume = this.videoHeight * this.volumeHeithgtimes;
    },
    // 保存初始化播放器样式
    saveInitStyle() {
      this.initVideoWidth = this.videoWidth;
      this.initVideoHeight = this.videoHeight;
    },
    // 全屏样式设置
    fullScreenStyleSet() {
      this.$yanyan_video_wraper.style.width = "100vw";
      this.$yanyan_video_wraper.style.height = "100vh";
    },
    // 退出全屏样式设置
    outFullScreenStyleSet() {
      this.$yanyan_video_wraper.style.width = `${this.initVideoWidth}px`;
      this.$yanyan_video_wraper.style.height = `${this.initVideoHeight}px`;
    },
    // 监听回调
    videoTouchStartCb(event) {
      // 记录触碰位置
      this.videoTouchX = event.targetTouches[0].clientX;
      this.videoTouchY = event.targetTouches[0].clientY;
      if (this.isPlaying) {
        // 在播放中才能开启倍速播放
        this.longpressTimer = setTimeout(() => {
          //当触碰开始计时，超过最短时间仍然保持触碰则设置为长按状态
          this.isLongPress = true;
        }, this.LONGPRESSMINTIME);
      }
    },
    videoTouchMoveCb(event) {
      // 一旦触发长按，则保持长按状态
      if (this.isLongPress) return;
      let touchX = event.targetTouches[0].clientX;
      let touchY = event.targetTouches[0].clientY;
      let moveX = Math.abs(this.videoTouchX - touchX);
      let moveY = Math.abs(this.videoTouchY - touchY);
      if (this.horizontalTouch == false && this.perpendicularTouch == false) {
        if (moveX > 20) {
          // 当水平移动超过20像素，判断为水平滑动
          // console.log("判断为水平滑动");
          this.horizontalTouch = true;
          this.lastcurrentTime = this.currentTime;
          // 滑动后立即清除长按判断
          clearTimeout(this.longpressTimer);
          this.longpressTimer = null;
        } else if (moveY > 20) {
          // console.log("判断为竖直滑动");
          this.perpendicularTouch = true;
          // 滑动后立即清除长按判断
          clearTimeout(this.longpressTimer);
          this.longpressTimer = null;
        }
      }
      // 水平滑动
      if (this.horizontalTouch) {
        // console.log("水平滑动");
        if (!this.src) return;
        this.istouch = true;
        if (this.willToRenderList.length) {
          this.willToRenderList = []; //清空
        }
        this.isvideo_durationShow = true;
        let moveX = touchX - this.videoTouchX;
        let rateTime;
        if (this.durationTime < this.maxSecond) {
          rateTime = Math.floor((moveX / this.videoWidth) * this.durationTime);
        } else {
          rateTime = Math.floor((moveX / this.videoWidth) * this.maxSecond);
        }
        this.precurrentTime = this.lastcurrentTime + rateTime;
        if (this.precurrentTime > this.durationTime) {
          this.precurrentTime = this.durationTime;
        }
        if (this.precurrentTime < 0) {
          this.precurrentTime = 0;
        }
        this.currentTime = this.precurrentTime;
        this.$video.seek(this.currentTime);
        // this.play();
      }
      // 垂直滑动
      if (this.perpendicularTouch) {
        // console.log("竖直滑动");
        this.lastvolume = this.volume;
        let moveY = this.videoTouchY - touchY + 20; //补回判断的20像素
        let ratevolume;
        if (this.videoTouchX < this.videoLeftToucharea) {
          // console.log("控制亮度");
        } else if (this.videoTouchX > this.videoRightToucharea) {
          // console.log("控制音量");
          this.isvideo_volumeShow = true;
          ratevolume = moveY / this.maxVolume;
          this.prevolume = this.lastvolume + ratevolume;
          if (this.prevolume > 1) {
            this.prevolume = 1;
          } else if (this.prevolume < 0) {
            this.prevolume = 0;
          }
          this.volume = this.prevolume;
          this.$yanyan_videoFullscreen.volume = this.volume;
        }
      }
    },
    videoTouchEndCb(event) {
      this.isvideo_durationShow = false;
      this.isvideo_volumeShow = false;
      this.horizontalTouch = false;
      this.perpendicularTouch = false;
      if (this.longpressTimer) {
        clearTimeout(this.longpressTimer);
        this.longpressTimer = null;
        this.isLongPress = false;
      }
      this.videoTouchX = 0;
      this.videoTouchY = 0;
      if (this.istouch) {
        this.falldownGetCurrentIndex();
        this.istouch = false;
      }
    },
    runbarTouchMoveCb(event) {
      this.istouch = true;
      if (!this.src) return;
      if (this.isPlaying) this.pause();
      let moveOffsetLeft = event.targetTouches[0].clientX;
      this.circleOffsetLeft = moveOffsetLeft - this.runbarOffsetLeft;
      if (this.circleOffsetLeft < 0) {
        this.circleOffsetLeft = 0;
      } else if (this.circleOffsetLeft > this.runbarWidth) {
        this.circleOffsetLeft = this.runbarWidth;
      }
    },
    runbarTouchEndCb(event) {
      if (!this.src) return;
      let rate = this.circleOffsetLeft / this.runbarWidth;
      this.currentTime = this.durationTime * rate;
      this.$video.seek(this.currentTime);
      this.play();
      if (this.istouch) {
        this.falldownGetCurrentIndex();
        this.istouch = false;
      }
    },
    // 镜像播放
    setIMAGE() {
      if (this.isVideoIMAGE) {
        this.isVideoIMAGE = false;
        this.$canvas.style.transform = ``;
      } else {
        this.isVideoIMAGE = true;
        this.$canvas.style.transform = `rotateY(180deg)`;
      }
    },
    // 倍速窗口显示
    speedShow() {
      this.isSpeedShowOn = true;
      this.isSpeedShow = !this.isSpeedShow;
      if (this.isShowControl) {
        // 播放控件已显示，在计时器内再次单击将清除定时器并隐藏控件
        this.isShowControl = false;
        clearTimeout(this.controlTimeoutTimer);
        this.controlTimeoutTimer = null;
      }
    },
    // 选择倍速
    changeSpeed(speed) {
      if (speed) {
        this.$video.playbackRate(speed);
        this.currentSpeed = speed;
      }
      this.isSpeedShow = false;
    },
    // 获取视频信息
    getVideoInfo(src) {
      uni.getVideoInfo({
        src,
        success: (res) => {
          this.durationTime = Math.floor(res.duration);
          this.size = (res.size / 1024 / 1024).toFixed(2);
          this.videoInfoWidth = res.width;
          this.videoInfoHeight = res.height;
        },
      });
    },
    // 点击进度条跳转
    falldown($event) {
      if (!this.src) return;
      // 点击进度条
      let offsetX = $event.detail.x;
      let rate = (offsetX - this.runbarOffsetLeft) / this.runbarWidth;
      this.currentTime = this.durationTime * rate;
      this.$video.seek(this.currentTime);
      this.falldownGetCurrentIndex();
      this.play();
    },
    // 通过时间跳转
    falldownByTime(time) {
      this.$video.seek(this.translateTime(time));
      // 通过时间跳转还存在问题
      this.falldownGetCurrentIndex()
    },
    translateTime(time) {
      let TIME_REGEXP = /((?<hour>\d{0,4}):)?(?<minute>\d{2}):(?<second>\d{2})/;
      let seekTime = 0;
      if (TIME_REGEXP.test(time)) {
        let timeGroup = TIME_REGEXP.exec(time);
        let {
          groups: { hour, minute, second },
        } = timeGroup;
        if (hour) {
          seekTime += Number(hour) * 3600;
        }
        if (minute) {
          if (Number(minute) > 59) return;
          seekTime += Number(minute) * 60;
        }
        if (second) {
          if (Number(second) > 59) return;
          seekTime += Number(second);
        }
      }
      return seekTime;
    },
    // 单击/双击视频
    onClick() {
      // 如果倍速显示则隐藏，并且不会判断控件隐藏
      if (this.isSpeedShow) {
        this.isSpeedShow = false;
        return;
      }
      //已经单击过一次
      if (this.clicked) {
        clearTimeout(this.clickTimeoutTimer); //重置单击判断计时器
        this.clickTimeoutTimer = null;
        // console.log("本次点击为双击");
        this.dblclickPlayOrPause();
        this.clicked = false;
      }
      // 初次点击开始计时
      else {
        this.clicked = true;
        // 开始计时
        this.clickTimeoutTimer = setTimeout(() => {
          // 进入计时说明双击间隔过长，判断为单击
          // console.log("本次点击为单击");
          this.showVideoControl();
          this.clicked = false;
          clearTimeout(this.clickTimeoutTimer); //重置单击判断计时器
          this.clickTimeoutTimer = null;
        }, this.clickTimeoutsec);
      }
    },
    // 双击播放、暂停
    dblclickPlayOrPause() {
      if (!this.src) return;
      if (this.isPlaying) {
        this.pause();
      } else {
        this.play();
      }
    },
    // 单击显示底部播放器控件
    showVideoControl() {
      if (this.isShowControl) {
        // 播放控件已显示，在计时器内再次单击将清除定时器并隐藏控件
        this.isShowControl = false;
        clearTimeout(this.controlTimeoutTimer);
        this.controlTimeoutTimer = null;
      } else {
        //播放控件未显示，显示并开始打开计时器
        this.isShowControl = true;
        this.controlTimeoutTimer = setTimeout(() => {
          // 计时器自动隐藏播放控件，并清除计时器
          this.isShowControl = false;
          clearTimeout(this.controlTimeoutTimer);
          this.controlTimeoutTimer = null;
        }, this.CONTROLTIMEOUTSEC);
      }
    },
    // 点击播放控件重置计时器
    initControlTimerout() {
      // 存在计时器时，清除计时器
      if (this.controlTimeoutTimer) {
        clearTimeout(this.controlTimeoutTimer);
        this.controlTimeoutTimer = null;
        // 重置计时器
        this.controlTimeoutTimer = setTimeout(() => {
          clearTimeout(this.controlTimeoutTimer);
          this.isShowControl = false;
          this.controlTimeoutTimer = null;
        }, this.CONTROLTIMEOUTSEC);
      }
    },
    // 获取底层video节点对象
    getVideoEle(className) {
      let $element = document.getElementsByClassName(className)[0];
      return $element;
    },
    // 进入全屏
    requestFullScreen() {
      this.$yanyan_videoFullscreen.requestFullscreen();
      this.isFullScreen = true;
    },
    // 退出全屏
    exitFullScreen() {
      if (this.isFullScreen) {
        this.$video?.exitFullScreen();
        this.isFullScreen = false;
      } else {
        uni.navigateBack();
      }
    },
    // 播放
    play() {
      if (!this.src) return;
      if (this.isEnd) {
        this.currentTime = 0;
        this.currentRenderIndex = 0;
        this.willToRenderList = [];
        this.isEnd = false;
      }
      this.$video.play();
      this.isPlaying = true;
      this.initControlTimerout();
      this.renderToCanvas(); //开启渲染
    },
    // 暂停
    pause() {
      if (!this.src) return;
      this.$video.pause();
      this.isPlaying = false;
      this.initControlTimerout();
    },

    // video组件监听事件
    // #region
    onPlay(e) {
      this.isPlaying = true;
    },
    onPause(e) {
      this.isPlaying = false;
      this.pauseToRenderBarrage(); //暂停渲染
      // console.log("暂停播放");
    },
    onEnded(e) {
      this.isPlaying = false;
      this.isEnd = true;
    },
    timeupdate(event) {
      // 视频播放时间改变
      let { currentTime } = event.detail;
      this.currentTime = currentTime;
      // 获取视频缓存对象
      if (this.currentBufferTime !== this.durationTime) {
        this.timerange = this.$yanyan_videoFullscreen.buffered;
        this.timerangeMaxIndex = this.timerange.length;
      }
      this.renderBarrage();
    },
    fullscreenchange(e) {
      if (e.detail.fullScreen) {
        // console.log("进入全屏");
        this.fullScreenStyleSet();
        this.isFullScreen = true;
      } else {
        // console.log("退出全屏");
        this.outFullScreenStyleSet();
        this.isFullScreen = false;
      }
      this.verticalScreenInit();
    },
    onWaiting(e) {
      // console.log(e);
    },
    // #endregion
  },
  filters: {
    timeFilter(number) {
      let hour, minute, second;
      hour = Math.floor(number / 3600);
      minute = Math.floor((number - hour * 3600) / 60);
      second = Math.floor(number - hour * 3600 - minute * 60);
      let strhour = hour.toString().padStart(2, 0);
      let strminute = minute.toString().padStart(2, 0);
      let strsecond = second.toString().padStart(2, 0);
      let result = hour
        ? `${strhour}:${strminute}:${strsecond}`
        : minute
        ? `${strminute}:${strsecond}`
        : second
        ? `00:${strsecond}`
        : "00:00";
      return result;
    },
  },
  computed: {
    runbarLeftWidth() {
      let currentTime = this.currentTime;
      let durationTime = this.durationTime;
      let result = 0;
      if (durationTime) {
        result = (currentTime / durationTime) * this.runbarWidth;
        if (result > this.runbarWidth) {
          result = this.runbarWidth;
        }
        this.circleOffsetLeft = result;
        return result;
      }
      this.circleOffsetLeft = 0;
      return 0;
    },
    runbarBufferWidth() {
      if (this.currentBufferTime) {
        return (this.currentBufferTime / this.durationTime) * this.runbarWidth;
      }
      return 0;
    },
    currentBufferTime() {
      let currentBufferTime = 0;
      if (this.timerangeMaxIndex > 0) {
        currentBufferTime = Math.floor(
          this.timerange?.end(this.timerangeMaxIndex - 1)
        );
      }
      return currentBufferTime;
    },
    volumebarLeftWidth() {
      return this.volumebarWidth * this.volume;
    },
    volumebarRightWidth() {
      return this.volumebarWidth * (1 - this.volume);
    },
    zoomFactor() {
      // 横屏
      // 当窗口宽度比高度长时 (375x210)
      if (this.videoInfoWidth > this.videoInfoHeight) {
        // console.log("横屏视频");
        // 当视频为横屏拍摄时 (1001x400)
        // 按照宽度缩放
        let rateW = Number((this.videoWidth / this.videoInfoWidth).toFixed(4));
        return rateW;
      } else {
        // console.log("竖屏视频");
        // 当视频为竖屏时(400x1000)
        // 按照高度缩放
        let rateH = Number(
          (this.videoHeight / this.videoInfoHeight).toFixed(4)
        );
        return rateH;
      }
    },
    canvasRenderWidth() {
      return this.videoInfoWidth * this.zoomFactor;
    },
    canvasRenderHeight() {
      return this.videoInfoHeight * this.zoomFactor;
    },
  },
  watch: {
    src(newVal) {
      this.getVideoInfo(newVal);
      this.isPlaying = false;
      this.currentTime = 0;
    },
    canvasRenderWidth(newVal) {
      this.$canvas.width = newVal + "px";
    },
    canvasRenderHeight(newVal) {
      this.$canvas.width = newVal + "px";
    },
    isLongPress(newVal) {
      if (newVal && this.isPlaying) {
        // 当启动长按状态并且视频正在播放
        this.$video.playbackRate(this.LONGPRESSSPEED);
        if (this.isShowControl) {
          // 并立即隐藏进度条
          this.isShowControl = false;
          clearTimeout(this.controlTimeoutTimer);
          this.controlTimeoutTimer = null;
        }
      } else {
        // 恢复为当前速度
        this.$video.playbackRate(this.currentSpeed);
      }
    },
  },
};
</script>

<style lang="scss">
* {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  --bgcolor: rgb(29, 176, 252);
}
.yanyan_video_wraper {
  position: relative;
  width: 750rpx;
  height: 420rpx;
  .videoPlayer_outer {
    position: relative;
    width: 100%;
    height: 100%;
    .videoPlayer_inner {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: relative;
      .renderbox {
        position: absolute;
        top: 0;
        z-index: 2147483640;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
      }

      video {
        display: none;
      }
    }
    .barrageListShow_wrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2147483650;
      .barrage {
        position: absolute;
        text-shadow: 0 0 4rpx #000;
        white-space: nowrap;
        left: 100vw;
        color: #fff;
      }
      .barrage_init {
        // 初始化完成后更改为当前class
      }
      .barrage_normal {
        // 根据弹幕显示位置类型匹配class
      }
      .barrage_hidden {
        // 隐藏时更改为当前class
      }
      .barrage_stop {
        // 暂停是更改为当前class
      }
      .barrage_falldown {
        // 跳转时更改为当前class？
        visibility: hidden;
      }
    }
  }

  .video_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    position: absolute;
    top: 0;
    z-index: 2147483650;
    padding: 0 20rpx;
    width: 750rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-image: linear-gradient(
      rgba(22, 22, 22, 0.7),
      rgba(22, 22, 22, 0)
    );
    .video_top_title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      text-align: center;
      .back {
        width: 70rpx;
        height: 80rpx;
        background-image: url("~@/static/video/back.png");
        background-repeat: no-repeat;
        background-size: 50rpx 50rpx;
        background-position-x: center;
        background-position-y: center;
      }
      .videoTitle {
        padding: 0 16rpx;
        display: none;
      }
    }
    .video_top_function {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      text-align: center;
      .fullScreen_function {
        display: flex;
        flex-direction: row;
        align-items: center;
        display: none;
        .like {
          width: 70rpx;
          height: 80rpx;
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          &.on {
            background-image: url("~@/static/video/zan_on.png");
          }
          &.off {
            background-image: url("~@/static/video/zan_off.png");
          }
        }
        .report {
          width: 70rpx;
          height: 80rpx;
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          transform: rotateX(180deg);
          &.on {
            background-image: url("~@/static/video/zan_on.png");
          }
          &.off {
            background-image: url("~@/static/video/zan_off.png");
          }
        }
        .coin {
          width: 70rpx;
          height: 80rpx;
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          &.on {
            background-image: url("~@/static/video/coin_on.png");
          }
          &.off {
            background-image: url("~@/static/video/coin_off.png");
          }
        }
        .share {
          width: 70rpx;
          height: 80rpx;
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          background-image: url("~@/static/video/share.png");
        }
      }
      .outfullScreen_function {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        .floating {
          width: 70rpx;
          height: 80rpx;
          background-image: url("~@/static/video/minivideo.png");
          background-repeat: no-repeat;
          background-size: 60rpx 50rpx;
          background-position-x: center;
          background-position-y: center;
        }
        .projector {
          width: 70rpx;
          height: 80rpx;
          background-image: url("~@/static/video/projector.png");
          background-repeat: no-repeat;
          background-size: 42rpx 42rpx;
          background-position-x: center;
          background-position-y: center;
        }
      }
      .more {
        width: 70rpx;
        height: 80rpx;
        background-image: url("~@/static/video/more.png");
        background-repeat: no-repeat;
        background-size: 40rpx 40rpx;
        background-position-x: center;
        background-position-y: center;
      }
    }
  }
  .speedPlay {
    position: absolute;
    top: 170rpx;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    margin-top: 30rpx;
    z-index: 2147483650;
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    padding: 0 10rpx;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .video_duration {
    position: absolute;
    z-index: 2147483650;
    width: 220rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    padding: 0 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 10rpx;
    top: 170rpx;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .video_volume {
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 2147483650;
    justify-content: space-around;
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    padding: 0 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 10rpx;
    top: 170rpx;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .volume_icon {
      width: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .on {
        height: 50rpx;
        background-image: url("~@/static/video/sound.png");
        background-repeat: no-repeat;
        background-size: 50rpx 50rpx;
        background-position-x: center;
        background-position-y: center;
      }
      .off {
        height: 50rpx;
        background-image: url("~@/static/video/soundno.png");
        background-repeat: no-repeat;
        background-size: 50rpx 50rpx;
        background-position-x: center;
        background-position-y: center;
      }
    }
    .volumebar {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 180rpx;
      .volumebarLeft {
        height: 4rpx;
        // background-color: rgb(240, 137, 154);
        background-color: var(--bgcolor);
        width: 50%;
      }
      .volumebarRight {
        height: 4rpx;
        background-color: rgba(255, 255, 255, 0.527);
        width: 50%;
      }
    }
  }
  .video_control {
    position: absolute;
    background-image: linear-gradient(
      rgba(22, 22, 22, 0),
      rgba(22, 22, 22, 0.7)
    );
    width: 750rpx;
    height: 80rpx;
    line-height: 80rpx;
    bottom: 0;
    z-index: 2147483650;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 20rpx;
    text-align: center;
    font-size: 24rpx;
    .play {
      width: 70rpx;
      .playicon {
        height: 80rpx;
        background-image: url("~@/static/video/play.png");
        background-repeat: no-repeat;
        background-size: 40rpx 40rpx;
        background-position-x: center;
        background-position-y: center;
      }
      .pauseicon {
        height: 80rpx;
        background-image: url("~@/static/video/pause.png");
        background-repeat: no-repeat;
        background-size: 40rpx 40rpx;
        background-position-x: center;
        background-position-y: center;
      }
    }
    .progressbox {
      display: flex;
      flex-direction: row;
      .progress_wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        width: 360rpx;
        margin: 0 20rpx;
        .progress_outer {
          display: flex;
          align-items: center;
          flex-direction: row;
          position: relative;
          background-color: rgba(255, 255, 255, 0.2);
          height: 4rpx;
          width: 100%;

          .progress_left {
            height: 100%;
            // transform-origin: left;
            background-color: var(--bgcolor);
            width: 2rpx;
            position: absolute;
            left: 0;
          }
          .circle {
            height: 10px;
            width: 10px;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            position: absolute;
            left: 0;
          }
          .progress_buffer {
            height: 100%;
            // transform-origin: left;
            background-color: rgba(255, 255, 255, 0.5);
            width: 2rpx;
            position: absolute;
            left: 0;
          }
        }
      }
      .time {
        font-size: 24rpx;
        width: 160rpx;
      }
      .left {
        display: none;
      }
    }
    .barrage_wrapper {
      display: none;
    }
    .speed {
      font-size: 24rpx;
      width: 60rpx;
      display: none;
    }
    .muted {
      font-size: 24rpx;
      width: 60rpx;
    }

    .full_screen {
      // font-size: 24rpx;
      width: 70rpx;
      height: 80rpx;
      background-image: url("~@/static/video/fullscreen.png");
      background-repeat: no-repeat;
      background-size: 40rpx 40rpx;
      background-position-x: center;
      background-position-y: center;
    }
    .endfull_screen {
      width: 70rpx;
      height: 80rpx;
      background-image: url("~@/static/video/endfullscreen.png");
      background-repeat: no-repeat;
      background-size: 40rpx 40rpx;
      background-position-x: center;
      background-position-y: center;
    }
    .resolutionRatio {
      display: none;
    }
  }
  .speedList {
    position: absolute;
    z-index: 2147483650;
    top: 0;
    right: 0;
    width: 300rpx;
    height: 420rpx;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    .on {
      color: var(--bgcolor);
    }
  }
  .show {
    animation-name: moveIn;
    animation-fill-mode: forwards;
    animation-duration: 0.1s;
    animation-timing-function: linear;
  }
  .hidden {
    animation-name: moveOut;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
    animation-timing-function: linear;
  }
}
@keyframes moveIn {
  0% {
    // right: -300rpx;
    transform: translateX(300rpx);
  }
  100% {
    // right: 0;
    translate: translateX(0);
  }
}
@keyframes moveOut {
  0% {
    // right: 0;
    transform: translateX(0);
  }
  100% {
    // right: -300rpx;
    transform: translateX(300rpx);
  }
}

// 横屏查询
@media all and (orientation: landscape) {
  .yanyan_video_wraper {
    width: 100vw;
    height: 100vh;
    .videoPlayer_inner {
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
      .renderbox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        z-index: 2147483650;
        margin: auto;
      }
    }
    .video_top {
      display: flex;
      width: 100vw;
      padding-top: 20rpx;
      height: 110rpx;
      .video_top_title {
        .back {
          background-image: url("~@/static/video/leftarrowhead.png");
          background-size: 60rpx 60rpx;
        }
        .videoTitle {
          padding: 0 16rpx;
          font-size: 40rpx;
          display: block;
        }
      }
      .video_top_function {
        .fullScreen_function {
          display: flex;
          .like,
          .report,
          .share,
          .coin {
            background-size: 60rpx 60rpx;
            margin: 0 20rpx;
          }
        }
        .outfullScreen_function {
          display: none;
        }
        .more {
          background-size: 60rpx 60rpx;
          margin: 0 20rpx;
        }
      }
    }
    .video_control {
      width: 100vw;
      height: 90rpx;
      line-height: 90rpx;
      .play {
        width: 8%;
        .playicon {
          height: 90rpx;
        }
        .pauseicon {
          height: 90rpx;
        }
      }
      .progressbox {
        position: absolute;
        width: 100vw;
        height: 40rpx;
        bottom: 80rpx;
        .progress_wrapper {
          width: 84%;
        }
        .time {
          font-size: 28rpx;
          width: 8%;
          height: 40rpx;
          line-height: 40rpx;
        }
        .left {
          display: block;
        }
        .right {
          display: none;
        }
      }
      .barrage_wrapper {
        display: flex;
        flex-direction: row;
        width: 80%;
        align-items: center;
        .barrage_ {
          height: 80rpx;
          width: 70rpx;
          background-repeat: no-repeat;
          background-size: 65rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          &.on {
            background-image: url("~@/static/video/barrage_on.png");
          }
          &.off {
            background-image: url("~@/static/video/barrage_off.png");
          }
        }
        .barrage_set {
          height: 80rpx;
          width: 70rpx;
          background-repeat: no-repeat;
          background-size: 40rpx 40rpx;
          background-position-x: center;
          background-position-y: center;
          background-image: url("~@/static/video/barrage_set.png");
        }
        .barrage_input {
          border-radius: 60rpx;
          height: 60rpx;
          width: 70%;
          text-align: left;
          line-height: 60rpx;
          padding-left: 30rpx;
          margin-left: 10rpx;
          font-size: 28rpx;
          color: #000;
          background-color: rgba(255, 255, 255, 0.8);
        }
      }
      .speed {
        font-size: 30rpx;
        width: 8%;
        display: block;
      }
      .full_screen {
        width: 8%;
        height: 90rpx;
      }
      .endfull_screen {
        display: none;
      }
      .resolutionRatio {
        width: 8%;
        height: 90rpx;
        display: block;
      }
    }
    .speedList {
      width: 500rpx;
      height: 100vh;
    }
  }
  @keyframes moveIn {
    0% {
      // right: -500rpx;
      transform: translateX(500rpx);
    }
    100% {
      // right: 0;
      transform: translateX(0);
    }
  }
  @keyframes moveOut {
    0% {
      // right: 0;
      transform: translateX(0);
    }
    100% {
      // right: -500rpx;
      transform: translateX(500rpx);
    }
  }
}
</style>